<template>
  <div>
    <el-container>

      <el-container>
        <el-aside width="200px">
<!--          <el-button @click="test">测试按钮</el-button>-->
          <LeftNav></LeftNav>
        </el-aside>
        <el-main class="bg">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import TopNav from "./Teacher/TopNav";
import LeftNav from "./Teacher/LeftNav";
import ClassSelector from "./Teacher/utilComp/ClassSelector";
import state from '../store/index'
import VueCookies from 'vue-cookies'
import tc from "../store/teacher"
import axios from 'axios'
import qs from 'qs'

export default {
  /**
   * 防止强制输入路由路径访问
   */
  beforeCreate() {// 在页面重新载入的时候，通过cookie重新载入身份等信息
    console.log('teacher before create')
  },
  computed: {
    curRole() {
      return state.getters.getRole
    },
    userInfo() {
      return state.getters.userInfo
    }
  },
  beforeRouteEnter(from, to, next) {
    console.log(">???????????????????????????????")
    if (to.name != null) { // 当不是强制路由，而是由页面跳转来时，允许跳转
      next()

    } else {// 否则进行检查
      if (VueCookies.get("role") !== "teacher" && VueCookies.get("role") !== 'test') {
        next("/");
      } else {

        next()
      }

    }
  },

  async mounted() {
    console.log(2, this.userInfo)
    await axios.post('/api/getClassByTeacherId', qs.stringify({teacher_id: state.getters.userInfo.id}))
      .then(res1 => {
        tc.commit('setClasses', res1.data.classInfo)
        console.log(res1, '课程信息')
      })
    await axios.post('/api/getTeacherInfo', qs.stringify({authorizeToken: this.userInfo.authorizeToken}))
      .then(res => {
        console.log(res)
        tc.commit('setTeacherInfo',res.data)
      })
  },
  components: {ClassSelector, LeftNav, TopNav},
  name: 'teacher',
  data() {

    return {}
  },
  methods: {
    test() {
      axios.post('/api/getTeacherInfo', qs.stringify({authorizeToken: this.userInfo.authorizeToken}))
        .then(res => {
          console.log(res)
        })
    }
  }


}
</script>

<style scoped>
.bg {
  background-color: #f9fafc;
  margin: 0 auto;
}
</style>
